<template>
  <div>
    <!-- 查询 -->
    <div class="searchBar">
      <!-- <el-tooltip  effect="dark" content="Top Center 提示文字" placement="top">
        <span class="el-icon-question details-icon"></span>
      </el-tooltip> -->
      <span style="font-size: 14px"> 所属数据看版：</span>
      <el-select
        clearable
        @change="changPanel"
        v-model="dataPanel"
        placeholder="请选择"
      >
        <el-option
          v-for="item in NameLi"
          :key="item.id"
          :label="item.boardName"
          :value="item.id"
        ></el-option>
      </el-select>
      <!-- <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
        <span class="el-icon-question details-icon"></span>
      </el-tooltip> -->
      <span style="font-size: 14px" class="onebox">依赖数据源：</span>
      <el-select
        clearable
        @change="changSource"
        v-model="dataSource"
        placeholder="请选择"
      >
        <el-option
          v-for="item in DropDown"
          :key="item.id"
          :label="item.dataSourceName"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-button
        style="margin-left: 30px"
        type="primary"
        size="small"
        @click="ConditionSearch"
        >搜索</el-button
      >

      <el-button
        style="margin-left: 30px"
        type="primary"
        size="small"
        @click="search"
        >添加</el-button
      >
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData.slice((pageNum - 1) * PageSize, pageNum * PageSize)"
      border
    >
      <el-table-column
        type="index"
        :index="indexMethod"
        label="序号"
      ></el-table-column>
      <el-table-column prop="dataSourceName" label="依赖数据源">
        <template slot-scope="scope">
          <div
            :class="scope.row.isClass"
            @click="isStyle(scope.row, 'isStyle', tableData)"
          >
            {{ scope.row.dataSourceName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="indexTypeName" label="指标集类型">
      </el-table-column>
      <el-table-column prop="boardName" label="看板名称"> </el-table-column>
      <el-table-column label="计算sql">
        <template slot-scope="scope">
          <div
            :class="scope.row.isClass"
            @click="isStyle(scope.row, 'isStyle', tableData)"
          >
            {{ scope.row.indexSetCalcuSql }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" width="170px" label="更新时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" size="small"
            >编辑
          </el-button>
          <!-- <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <paging-query
      :params = "params"
      :totalCount = "totalCount"
      @ParamsPageSize = "(value) => {this.params.pageSize = value}"
      @ParamsPageNum = "(value) => {this.handleCurrentChange(value)}"
    />
    <!-- 分页 -->
    <!-- <div style="text-align: center; margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-size="params.PageSize"
        layout="total, prev, pager, next"
        :total="totalCount"
      >
      </el-pagination>
    </div> -->

    <!-- 编辑弹出层 -->
    <div>
      <el-dialog
        :title="pagingname"
        :visible.sync="isDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="true"
        :before-close="handleDialogClose"
        destroy-on-close
        width="70%"
      >
        <div>
          <el-form
            :rules="rules"
            ref="ruleForm"
            :model="ruleForm"
            class="demo-ruleForm"
            label-width="120px"
          >
            <el-form-item
              label="数据源名称"
              class="item"
              prop="indexSetSourceId"
            >
              <el-select
                v-model="ruleForm.indexSetSourceId"
                placeholder=""
                :disabled="isEditTable"
                class="Popup_inputwidth"
              >
                <el-option
                  v-for="item in DropDown"
                  :key="item.id"
                  :label="item.dataSourceName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="指标类型" class="item" prop="indexSetTypeId">
              <el-select
                v-model="ruleForm.indexSetTypeId"
                placeholder=""
                :disabled="isEditTable"
                class="Popup_inputwidth"
              >
                <el-option
                  v-for="item in TheInterFace"
                  :key="item.id"
                  :label="item.indexTypeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="所属数据看版"
              class="item"
              prop="indexSetBelongBoardId"
            >
              <el-select
                v-model="ruleForm.indexSetBelongBoardId"
                placeholder=""
                :disabled="isEditTable"
                class="Popup_inputwidth"
              >
                <el-option
                  v-for="item in NameLi"
                  :key="item.id"
                  :label="item.boardName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="指标集计算sql"
              class="item"
              prop="indexSetCalcuSql"
            >
              <el-input
                v-model="ruleForm.indexSetCalcuSql"
                type="textarea"
                placeholder="请输入指标集计算使用的sql"
                size="small"
                class="Popup_inputwidth"
                clearable
              />
            </el-form-item>
            <el-form-item label="用户名" class="item" prop="createUser">
              <el-input
                v-model="ruleForm.createUser"
                placeholder="请输入用户名"
                size="small"
                class="Popup_inputwidth"
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetField('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="sureEdit('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  dataSource,
  NameList,
  TheInterface,
  IndexOfNew,
  UpdateInterface,
  DropDownQuery,
  isLogin,
  // RemovePort
} from "@/assets/js/api";
import PagingQuery from '@/components/PagingQuery';
export default {
  components: {PagingQuery},
  data() {
    return {
      // 表格显示隐藏
      RightWrong: true,
      // 数据总条数
      totalCount: 0,
      //弹窗表单
      ruleForm: {
        id: "",
        indexSetSourceId: "",
        indexSetBelongBoardId: "",
        indexSetTypeId: "",
        indexSetCalcuSql: "",
        createUser: "",
      },
      // 校验规则
      rules: {
        indexSetSourceId: [
          { required: true, message: "请选择数据源名称", trigger: "change" },
        ],
        indexSetBelongBoardId: [
          { required: true, message: "请选择所属数据看版", trigger: "change" },
        ],
        indexSetTypeId: [
          { required: true, message: "请选择指标类型", trigger: "change" },
        ],
        indexSetCalcuSql: [
          {
            required: true,
            message: "请输入指标集计算使用的sql",
            trigger: "blur",
          },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        createUser: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
          // { required: true, message: '输入不能为空', pattern: /(^\s*)|(\s*$)/,trigger: "blur" }
        ],
      },
      // 编辑
      pagingname: "",
      // 看板列表
      NameLi: [],
      // 获取数据的参数
      params: {
        pageNum: 1,
        pageSize: 10,
        indexSetBelongBoardId: "",
        indexSetSourceId: "",
      },
      dataPanel: "",
      dataSource: "",
      storeModelName: "edit",
      isEditTable: false,
      dialogVisible: false,
      // 用来确认是否是添加还是编辑
      JudgeConditions: false,
      pageNum: 1,
      PageSize: 10,
      // 表格数据
      tableData: [],
      // 数据源下拉
      DropDown: [],
      // 指标集所属类型列表
      TheInterFace: [],
      isDialog: false,

      SetBelongBoardId: null,
      SetBelongBoardI: null,
    };
  },
  created() {
    isLogin()
      .then((res) => {
        if (res.code == 0) {
          this.souarData(); //初始化列表接口调用
          this.NameL(); //看板名称列表接口
          this.TheIntQuery(); //依赖数据源下拉接口
          this.PopupWindow(); //指标集所属类型列表接口
        }
      })
      .catch(() => {
        this.login();
      });
  },
  methods: {
    // 删除
    // remove(row){
    //   console.log(row);
    // },
    // 单点登录地址
    login() {
      let url =
        "/data-conf-center-server/login?referUrl=" + window.location.href;
      window.location.href = url;
    },
    // 计算的隐藏与展开
    isStyle(val, className, data) {
      if (val.isClass == className) {
        data.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "";
          }
        });
      } else {
        data.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = className;
          }
        });
      }
    },
    // 清空表单
    ResetData() {
      this.ruleForm = {
        indexSetSourceId: "",
        indexSetBelongBoardId: "",
        indexSetTypeId: "",
        indexSetCalcuSql: "",
        createUser: "",
      };
    },
    // 点击x关闭
    handleDialogClose() {
      this.ResetData();
      this.isDialog = false;
    },
    // 弹窗数据源
    PopoverSource(value) {
      this.ruleForm.indexSetSourceId = value;
    },
    // 弹窗看板
    PopupKanban(value) {
      this.ruleForm.indexSetBelongBoardId = value;
    },
    // 指标类型
    PopupFace(value) {
      this.ruleForm.indexSetTypeId = value;
    },
    //  序号翻页连续排序
    indexMethod(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
    },
    // 指标配置更新
    async UpdateConfiguration(row) {
      let res = await UpdateInterface(row);
      if (res.code == 0) {
        location.reload();
        // console.log(res);
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 指标配置新增
    async NewConfiguration(row) {
      let res = await IndexOfNew(row);
      if (res.code == 0) {
        location.reload();
        // console.log(res);
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 依赖数据源下拉接口
    async TheIntQuery() {
      let res = await DropDownQuery();
      if (res.code == 0) {
        this.DropDown = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    async NameL() {
      let res = await NameList();
      if (res.code == 0) {
        this.NameLi = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    async PopupWindow() {
      let res = await TheInterface();
      if (res.code == 0) {
        this.TheInterFace = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // change事件
    changPanel(value) {
      this.SetBelongBoardId = value;
    },
    // change事件
    changSource(value) {
      this.SetBelongBoardI = value;
    },
    // 搜索按钮
    async ConditionSearch() {
      this.params.indexSetBelongBoardId = this.SetBelongBoardId;
      this.params.indexSetSourceId = this.SetBelongBoardI;
      this.params.pageNum = 1;
      this.params.pageSize = 10;
      let res = await dataSource(this.params);
      if (res.code == 0) {
        this.souarData();
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 添加按钮
    search() {
      this.ResetData();
      this.pagingname = "添加";
      this.isDialog = true;
      this.JudgeConditions = false;
    },
    // 初始化数据
    async souarData() {
      //调用列表接口
      let res = await dataSource(this.params);
      if (res.code == 0) {
        res.data.list.forEach((e) => {
          e.isClass = "isStyle";
        });
        this.tableData = res.data.list;
        this.totalCount = res.data.totalCount;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 编辑按钮
    handleEdit(row) {
      this.pagingname = "编辑";
      this.JudgeConditions = true;
      this.isDialog = true;
      this.ruleForm = {
        id: row.id,
        indexSetSourceId: row.dataSourceName,
        indexSetBelongBoardId: row.boardName,
        indexSetTypeId: row.indexTypeName,
        indexSetCalcuSql: row.indexSetCalcuSql,
        createUser: row.createUser,
      };
      let TypqId = this.DropDown.map((item) => item.dataSourceName).indexOf(
        this.ruleForm.indexSetSourceId
      );
      this.ruleForm.indexSetSourceId = this.DropDown[TypqId].id;

      let add = this.NameLi.map((item) => item.boardName).indexOf(
        this.ruleForm.indexSetBelongBoardId
      );
      this.ruleForm.indexSetBelongBoardId = this.NameLi[add].id;

      let res = this.TheInterFace.map((item) => item.indexTypeName).indexOf(
        this.ruleForm.indexSetTypeId
      );
      this.ruleForm.indexSetTypeId = this.TheInterFace[res].id;
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      // console.log(`每页 ${val} 条`);
    },
    // 点击分页时触发
    async handleCurrentChange(val) {
      this.params.pageNum = val;
      //调用列表接口
      // dataSource(this.params).then((res) => {
      //   if (res.code == 0) {
      //     this.tableData = res.data.list;
      //     this.totalCount = res.data.totalCount;
      //   }
      // });
      let res = await dataSource(this.params);
      if (res.code == 0) {
        res.data.list.forEach((e) => {
          e.isClass = "isStyle";
        });
        this.tableData = res.data.list;
        this.totalCount = res.data.totalCount;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
      // console.log(`当前页: ${val}`);
    },
    // 取消按钮
    resetField(formName) {
      this.$refs[formName].resetFields();
      this.ResetData();
      this.isDialog = false;
    },
    // 确认按钮
    sureEdit(formName) {
      this.ruleForm.indexSetCalcuSql = this.ruleForm.indexSetCalcuSql.trim();
      this.ruleForm.createUser = this.ruleForm.createUser.trim();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.JudgeConditions) {
            this.UpdateConfiguration(this.ruleForm);
          } else {
            this.NewConfiguration(this.ruleForm);
          }
          this.isDialog = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-tooltip__popper {
  font-size: 14px;
  max-width: 50%;
  overflow: hidden;
}
</style>
<style scoped>
.searchBar {
  height: 60px;
  line-height: 60px;
}
.onebox {
  margin-left: 30px;
}
::v-deep .el-input__inner {
  height: 30px;
}

.el-table {
  width: auto;
}
.Popup_inputwidth {
  width: 80%;
}
.add_to {
  color: #000;
  margin-left: 50px;
}
.isStyle {
  white-space: nowrap;
}
.searchBar .item{
  margin-left: 30px;
}
.el-icon-question{
  margin-right: 5px;
  color: rgb(131, 119, 119);
}
</style>
